<template>
  <div class="app">
    <van-nav-bar :title="FoodDetailsData.title" left-arrow @click-left="GOback" fixed placeholder :border="false" />
    <img :src="'//elm.cangdu.org/img/'+FoodDetailsData.image_path" alt="" width="100%">
    <p class="food_description_content">{{FoodDetailsData.description}}</p>

    <section class="detail_container">
      <p class="header_Food">{{FoodDetailsData.title}}</p>
      <div class="rating_context">
        <p class="rating_left">评分</p>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xingxing2"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xingxing2"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xingxing2"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xingxing2"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xingxing2"></use>
        </svg>
        <p class="rating_right">{{FoodDetailsData.rating}}.0</p>
      </div>
      <div class="month_sales">
        <p class="rating_left">月售 {{FoodDetailsData.month_sales}} 单</p>
        <p class="month_right">售价 ¥{{FoodDetailsData.price}} 起</p>
      </div>
      <div class="month_sales">
        <p class="rating_left">评伦数 {{FoodDetailsData.rating_count}}</p>
        <p class="rating_count">好评率 {{FoodDetailsData.satisfy_rate}}%</p>
      </div>
    </section>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['FoodDetailsData'])
  },
  methods: {
    GOback() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.food_description_content {
  font-size: 0.6rem;
  padding: 0 0.4rem;
  margin-top: 0.5rem;
}

.detail_container {
  padding: 0.5rem;
  .rating_context {
    display: flex;
    align-items: center;
    .rating_right {
      font-size: 0.55rem;
      display: block;
      margin-left: 0.2rem;
      color: #f60;
    }
  }
  .header_Food {
    font-size: 0.7rem;
    color: #333;
    margin-bottom: 0.2rem;
  }
  .month_sales {
    display: flex;
    margin-top: 0.3rem;
    .month_right {
      font-size: 0.55rem;
      color: #f60;
    }
  }
}
.rating_left {
  font-size: 0.55rem;
  display: block;
  color: #666;
  margin-right: 0.2rem;
}
.rating_count {
  font-size: 0.55rem;
  color: #666;
}
</style>